<template>
  <div>
    <h2>属性绑定指令</h2>
    <!-- 什么是属性，标签的属性。比如 <img/>标签的src属性，比如input标签的 type、value属性等等 -->

    <!-- 属性绑定指令：作用是将属性值 转成 对应的值 -->
    <img v-bind:src="url" alt="" />
    <!-- v-bind: 简写成  :  -->
    <img :src="url" alt="" />
    <br />
    <input type="text" :value="abc" />
    <br />
    <input type="text" :value="abc + ' world'" />
  </div>
</template>

<script>
export default {
  // 对象里面可以写很多东西，比如 data、methods、computer、watch、components......
  // data 用于存储数据：
  // 写法上要求data定义成函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
  data() {
    return {
      // 把数据都放到这里
      url: "http://www.itcbc.com:3006/formdata/123.jpg",
      abc: "hello",
    };
  },
};
</script>

<style>
</style>